Ext.define('BISC.view.FilterManagerMonitorsInput', {
    extend: 'Ext.form.Panel',
    alias: ['widget.filtermanagermonitorsinput'],
    id: 'formAddFilterMonitor',
    title: 'Monitors',
    border: false,
    bodyPadding: 10,
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    border: false,
                    id: 'filterMonitorsPanel',
                    data: me.mainForm.filter.monitors,
                    tpl: new Ext.XTemplate('<table><tr><th></th><th class="thStyle">Exact match?</th><th class="thStyle">Monitor path</th></tr><tpl for=".">' +
                                    '<tr>' +
                                        '<td><button class="removeMonitorBtn" monitor-id="{id}">Remove</button></td>' +
                                        '<td><input class="monitorExactCbx" {[this.isChecked(values.isExact)]} monitor-id="{id}" type="checkbox"></td>' +
                                        '<td>{path}</td>' +
                                    '</tr>' +
                                '</tpl></table>', {
                                    isChecked: function( isExact ) {
                                        if ( isExact ) return 'checked="checked"';
                                        return '';
                                    }
                                }
                    )
                },
                {
                    xtype: 'component',
                    html: '<div id="addMonError" style="color: red; padding: 5px; font-weight: bold;"></div>'
                },
                {
                    xtype: 'panel',
                    border: false,
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'radio',
                            id: 'monitorByIdRadio',
                            name: 'monitorGroup',
                            value: 'monitorById',
                            checked: true
                        },
                        {
                            xtype: 'combo',
                            id: 'addMonitorId',
                            fieldLabel: 'Add monitor',
                            displayField: 'path',
                            width: 500,
                            valueField: 'path',
                            store: 'FolderListStore',
                            listeners: {
                                focus: function() {
                                    Ext.getCmp('monitorByIdRadio').setValue( true );
                                }
                            }
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    border: false,
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'radio',
                            id: 'monitorByInputRadio',
                            name: 'monitorGroup',
                            value: 'monitorByInput'
                        },
                        {
                            xtype: 'textfield',
                            id: 'addMonitorPath',
                            width: 500,
                            fieldLabel: 'or custom path',
                            enableKeyEvents: true,
                            scope: me,
                            listeners: {
                                scope: me,
                                keypress: function( field, e, opts ) {
                                    if ( e.keyCode == e.ENTER ) {
                                        var value = field.getValue();
                                        if ( value != '' ) {
                                            this.addMonitor();
                                        }
                                    }
                                },
                                focus: function() {
                                    Ext.getCmp('monitorByInputRadio').setValue( true );
                                }
                            }
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Add Monitor',
                    scope: me,
                    handler: me.addMonitor
                }
            ]
        });

        me.callParent(arguments);
    },
    addMonitor: function() {
        var me = this;
        if ( Ext.getCmp('monitorByIdRadio').checked ) {
            var tempMonitor = {
                id: me.mainForm.filter.tempId++,
                isExact: true,
                isMonitor: false,
                path: Ext.getCmp('addMonitorId').getValue()
            };
            if ( me.monitorExists( tempMonitor ) ) {
                Ext.get('addMonError').update('Monitor already exists.');
            } else {
                if ( tempMonitor.path != '' && tempMonitor.path != null ) {
                    me.mainForm.filter.monitors.push( tempMonitor );
                    Ext.getCmp('filterMonitorsPanel').update( me.mainForm.filter.monitors);
                    Ext.getCmp('selectedpath').getStore().load();
                    me.addDataviewItemListeners();
                    Ext.get('addMonError').update('');
                }
            }
        } else {
            var tempMonitor = {
                id: me.mainForm.filter.tempId++,
                isExact: true,
                isMonitor: false,
                path: Ext.getCmp('addMonitorPath').getValue()
            };
            if ( me.monitorExists( tempMonitor ) ) {
                Ext.get('addMonError').update('Monitor already exists.');
            } else {
                if ( tempMonitor.path != '' ) {
                    me.mainForm.filter.monitors.push( tempMonitor );
                    Ext.getCmp('filterMonitorsPanel').update( me.mainForm.filter.monitors );
                    Ext.getCmp('selectedpath').getStore().load();
                    me.addDataviewItemListeners();
                    Ext.get('addMonError').update('');
                }
            }
        }
    },
    addDataviewItemListeners: function() {
        Ext.getCmp('filterMonitorsPanel').getEl().select('.removeMonitorBtn').each( function( el ) {
            el.on( 'click', function( e, el, opts ) {
                var monitorId = el.getAttribute( 'monitor-id' );
                var monitors = Ext.getCmp('createFilterPanel').filter.monitors;
                Ext.each( monitors, function( monitor ) {
                    if ( monitor.id == monitorId ) {
                        monitors.splice( monitors.indexOf( monitor ), 1 );
                        Ext.getCmp('filterMonitorsPanel').update( monitors );
                        Ext.getCmp('formAddFilterMonitor').addDataviewItemListeners();
                        return;
                    }
                });
            });
        });
        Ext.getCmp('filterMonitorsPanel').getEl().select('.monitorExactCbx').each( function( el ) {
            el.on( 'click', function( e, el, opts ) {
                var monitorId = this.getAttribute( 'monitor-id' );
                var monitors = Ext.getCmp('createFilterPanel').filter.monitors;
                Ext.each( monitors, function( monitor ) {
                    if ( monitor.id == monitorId ) {
                        monitor.isExact = !monitor.isExact;
                        return;
                    }
                });
            });
        });
    },
    monitorExists: function( newMonitor ) {
        var flag = false;
        Ext.each( this.mainForm.filter.monitors, function( monitor ) {
            if ( monitor.path == newMonitor.path ) flag = true;
        });
        return flag;
    }
});
